<template>
  <div class="sport-container">
    <!-- 背景图 -->
    <div class="background-image"></div>
    
    <!-- 主面板 -->
    <div class="main-panel">
      <!-- 顶部设置区域 -->
      <div class="settings-area">
        <div class="setting-title">设置运动时间</div>
        <div class="setting-reminder">
          <span>预时提醒</span>
          <div class="switch-button" @click="toggleReminder">
            <div class="switch-dot" :class="{ active: reminderActive }"></div>
          </div>
        </div>
        
        <!-- 时间选择器 -->
        <div class="time-picker">
          <div class="time-block">
            <input type="text" v-model="hours" maxlength="2" @input="validateNumber('hours')">
          </div>
          <div class="time-separator">:</div>
          <div class="time-block">
            <input type="text" v-model="minutes" maxlength="2" @input="validateNumber('minutes')">
          </div>
          <div class="time-separator">:</div>
          <div class="time-block">
            <input type="text" v-model="seconds" maxlength="2" @input="validateNumber('seconds')">
          </div>
        </div>
      </div>
      
      <!-- 运动类型选择 -->
      <div class="sport-type-selector">
        <div class="arrow left" @click="prevSportType">
          <div class="arrow-content">
            <span>&lt;</span>
            <div class="arrow-label">{{ sportTypes[(currentTypeIndex - 1 + sportTypes.length) % sportTypes.length].name }}</div>
          </div>
        </div>
        
        <div class="sport-types">
          <div 
            v-for="(type, index) in visibleSportTypes" 
            :key="type.id" 
            class="sport-type" 
            :class="{ 
              active: selectedSport === type.id,
              center: index === 1
            }" 
            @click="selectSport(type.id)"
          >
            <div class="sport-icon">
              <img :src="getSportIcon(type.id)" :alt="type.name">
            </div>
            <div class="sport-name">{{ type.name }}</div>
          </div>
        </div>
        
        <div class="arrow right" @click="nextSportType">
          <div class="arrow-content">
            <span>&gt;</span>
            <div class="arrow-label">{{ sportTypes[(currentTypeIndex + visibleCount) % sportTypes.length].name }}</div>
          </div>
        </div>
      </div>
      
      <!-- 底部按钮区域 -->
      <div class="bottom-area">
        <button class="location-button" @click="goToMap">
          <div class="location-icon"></div>
          <span>设置目的地</span>
        </button>
        
        <button class="start-button" @click="goToRun">
          开始！
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';

// 路由
const router = useRouter();

// 时间设置
const hours = ref('00');
const minutes = ref('00');
const seconds = ref('00');

// 是否开启提醒
const reminderActive = ref(true);

// 当前显示的运动类型索引
const currentTypeIndex = ref(0);

// 同时显示的运动类型数量
const visibleCount = 3;

// 可用的运动类型
const sportTypes = ref([
  { id: 'swimming', name: '游泳' },
  { id: 'running', name: '户外跑步' },
  { id: 'cycling', name: '骑行' },
  { id: 'hiking', name: '登山' },
  { id: 'yoga', name: '瑜伽' }
]);

// 选中的运动类型
const selectedSport = ref('running');

// 当前可见的运动类型
const visibleSportTypes = computed(() => {
  const result = [];
  for (let i = 0; i < visibleCount; i++) {
    const index = (currentTypeIndex.value + i) % sportTypes.value.length;
    result.push(sportTypes.value[index]);
  }
  return result;
});

// 获取运动图标
const getSportIcon = (sportId: string) => {
  switch (sportId) {
    case 'swimming':
      return "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 16.5h18.5c1.8 0 1.8-2.5 0-2.5h-.5c-1.2 0-1.7.3-2.5 1-1 .8-1.8 1.5-3.5 1.5s-2.5-.7-3.5-1.5c-1-.8-1.3-1-2.5-1s-1.5.2-2.5 1c-1 .8-1.8 1.5-3.5 1.5v1z'/%3E%3Cpath d='M12 9c1.2 0 2.1-1.1 2-2.5 0-1.1-.3-3.1-1.5-4.4-.6-.7-1.7-.7-2.3 0-1 1.4-1.2 3.3-1.2 4.4 0 1.4.9 2.5 2 2.5z'/%3E%3Cpath d='M15.5 10.5c-1.7 0-2.5-.7-3.5-1.5-1-.8-1.3-1-2.5-1s-1.5.2-2.5 1c-.3.2-.6.5-1 .7.7.7 1.7.8 2.5.3l1-.7c1-.8 1.3-1 2.5-1s1.5.2 2.5 1l1 .7c1.2.8 2.7.5 3.5-.3l-1-.7c-1-.8-1.3-1-2.5-1z'/%3E%3C/svg%3E";
    case 'running':
      return "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 5.3c-1.2-.7-1.7-1.3-2-1.8l-1-1.5c-.1-.2-.3-.3-.5-.3-.5 0-1.3.2-2.8 1.1-.4.3-.6.6-.8 1l-1.5 3c-.4.8.2 1.7 1 1.7h.3l-1.2 6c-.1.5.3 1 .8 1.1h.3c.4 0 .8-.3.9-.7l1.4-6.5 1.3 2.2v5c0 .5.4.9.9.9h.4c.5 0 .9-.4.9-.9v-5.5c0-.4-.1-.8-.4-1l-1-1.1 1-2z'/%3E%3C/svg%3E";
    case 'cycling':
      return "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.5 8.3l-1.8-4c-.2-.5-.7-.8-1.2-.8h-3v1.5h3l1.2 3h-9.7l.8 1.5h7.2l-1.2 2.5h-1.3c-.7-1.9-2.5-3.1-4.5-3.1-2.8 0-5 2.2-5 5s2.2 5 5 5c2 0 3.9-1.3 4.5-3.1h1.8c.3 0 .5-.1.7-.3l2-4.5c.3-.8.1-1.7-.7-2.7z'/%3E%3Ccircle cx='8' cy='14' r='3.5'/%3E%3Ccircle cx='19' cy='14' r='3.5'/%3E%3C/svg%3E";
    case 'hiking':
      return "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 5.3c-1.2-.7-1.7-1.3-2-1.8l-1-1.5c-.1-.2-.3-.3-.5-.3-.5 0-1.3.2-2.8 1.1-.4.3-.6.6-.8 1l-1 2c-.6 1.2-.2 2.7 1 3.3l.7.3-.8 8.8c-.1.5.3 1 .8 1.1h.3c.4 0 .8-.3.9-.7l.8-8.5 1.2.6.3 3.1c.1.5.5.8 1 .8h.3c.4 0 .8-.3.9-.7l.6-6c.1-.5-.1-1-.5-1.3l-2.4-2.2.7-1.1 1 .9c.6.5 1.4.8 2.2.7l1.5-.2c.5-.1.9-.5.9-1v-.2c0-.5-.4-.9-.9-1l-1.8-.3c-.6-.1-1.2.1-1.7.5l-1.6 1.6z'/%3E%3C/svg%3E";
    case 'yoga':
      return "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm4.5 7.5c-.2 0-.5.1-.6.2-.9.5-2 .7-3.1.6-1.2-.2-2.2-.7-3.1-1.2-.9-.5-1.8-.6-2.7-.2-1 .4-1.8 1.2-2.3 2.2C5 12.5 5.1 14.3 6 16c.9 1.7 2.2 2.9 3.8 3.5.4.1.8.2 1.2.3.2 0 .4 0 .5-.1.2-.1.3-.3.3-.5v-2.3c0-.4-.1-.8-.4-1.1-.2-.3-.6-.4-1-.3-.4.1-.8.3-1.1.7-.3.4-.5.9-.4 1.4.1.5.3.9.7 1.3.3.4.8.6 1.3.6.5 0 1-.1 1.4-.4.4-.3.7-.7.8-1.2.1-.5 0-1-.2-1.5-.2-.4-.6-.8-1.1-.9-.5-.1-.9 0-1.4.2-.4.2-.8.6-1 1.1-.2.4-.2.9 0 1.4.2.4.5.8 1 1 .4.2.9.2 1.3 0 .4-.1.8-.4 1-.8.2-.4.3-.8.2-1.2 0-.4-.2-.8-.5-1.1-.3-.3-.7-.4-1.1-.4-.4 0-.8.1-1.1.4-.3.3-.5.7-.5 1.1 0 .4.1.8.4 1.1.3.3.7.5 1.1.5.4 0 .8-.1 1.1-.4.3-.3.5-.7.5-1.1 0-.4-.1-.8-.4-1.1-.3-.3-.7-.5-1.1-.5'/%3E%3C/svg%3E";
    default:
      return "";
  }
};

// 验证输入的是否为数字
const validateNumber = (type: 'hours' | 'minutes' | 'seconds') => {
  const value = eval(type).value;
  
  // 移除非数字字符
  let cleanValue = value.replace(/[^0-9]/g, '');
  
  // 确保在正确范围内
  if (cleanValue === '') cleanValue = '00';
  else {
    let numValue = parseInt(cleanValue);
    if (type === 'hours') {
      numValue = Math.min(23, numValue);
    } else {
      numValue = Math.min(59, numValue);
    }
    cleanValue = numValue.toString().padStart(2, '0');
  }
  
  eval(type).value = cleanValue;
};

// 切换提醒状态
const toggleReminder = () => {
  reminderActive.value = !reminderActive.value;
};

// 选择运动类型
const selectSport = (sportType: string) => {
  selectedSport.value = sportType;
};

// 切换到前一个运动类型组
const prevSportType = () => {
  currentTypeIndex.value = (currentTypeIndex.value - 1 + sportTypes.value.length) % sportTypes.value.length;
};

// 切换到下一个运动类型组
const nextSportType = () => {
  currentTypeIndex.value = (currentTypeIndex.value + 1) % sportTypes.value.length;
};

// 跳转到地图页面
const goToMap = () => {
  router.push('/map');
};
const goToRun = () => {
  router.push('/run');
};
// 开始运动
const startSport = () => {
  const duration = {
    hours: parseInt(hours.value),
    minutes: parseInt(minutes.value),
    seconds: parseInt(seconds.value)
  };



  
  console.log('开始运动:', {
    sportType: selectedSport.value,
    duration,
    reminderActive: reminderActive.value
  });
  
  // 这里可以添加开始运动的逻辑
};
</script>

<style scoped>
.sport-container {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  overflow: hidden;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://ts1.tc.mm.bing.net/th/id/OIP-C.nUrzCsKE0YYsrJlSUvTLAwHaE7?w=295&h=211&c=8&rs=1&qlt=90&o=6&cb=iavawebpc1&dpr=1.5&pid=3.1&rm=2');
  background-size: cover;
  background-position: center;
  z-index: -1;
  filter: brightness(0.9);
}

/* 主面板 */
.main-panel {
  width: min(92%, 340px);
  height: auto;
  min-height: 45vh;
  max-height: 85vh;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  padding: clamp(16px, 5vw, 25px);
  overflow: hidden;
  margin: 15px 0;
}

/* 顶部设置区域 */
.settings-area {
  margin-top: 0;
  padding: 0;
}

.setting-title {
  font-size: clamp(16px, 4vw, 18px);
  font-weight: bold;
  margin-bottom: clamp(8px, 2vw, 10px);
  color: #222;
}

.setting-reminder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: clamp(12px, 3vw, 14px);
  margin-bottom: clamp(10px, 3vw, 15px);
  color: #555;
}

.switch-button {
  width: 50px;
  height: 26px;
  background-color: #eee;
  border-radius: 15px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s;
}

.switch-dot {
  width: 22px;
  height: 22px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.switch-dot.active {
  transform: translateX(24px);
  background-color: #4cd4bc;
}

.switch-button:has(.active) {
  background-color: rgba(76, 212, 188, 0.3);
}

/* 时间选择器 */
.time-picker {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: clamp(10px, 3vw, 15px);
  margin-bottom: clamp(20px, 5vw, 25px);
}

.time-block {
  flex: 1;
  height: clamp(40px, 10vw, 55px);
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #f0f0f0;
  margin: 0 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.time-block input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  text-align: center;
  font-size: clamp(18px, 5vw, 28px);
  font-weight: bold;
  color: #000;
}

.time-separator {
  font-size: clamp(18px, 5vw, 28px);
  font-weight: bold;
  margin: 0 5px;
  color: #000;
}

/* 运动类型选择器 */
.sport-type-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  width: 100%;
  padding: 0;
}

.arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(25px, 7vw, 35px);
  height: clamp(80px, 20vw, 110px);
  color: #555;
  background-color: #f5f5f5;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
  z-index: 1;
  transition: background-color 0.2s;
}

.arrow:hover {
  background-color: #eee;
}

.arrow-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 8px 0;
}

.arrow span {
  font-size: clamp(16px, 4.5vw, 20px);
  margin-bottom: 5px;
}

.arrow.left {
  border-radius: 0 5px 5px 0;
  margin-left: -8px;
}

.arrow.right {
  border-radius: 5px 0 0 5px;
  margin-right: -8px;
}

.arrow-label {
  font-size: clamp(9px, 2.5vw, 12px);
  margin-top: 8px;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}

.sport-types {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex: 1;
  padding: 0 clamp(8px, 2.5vw, 12px);
  position: relative;
  height: 110px;
}

.sport-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: clamp(5px, 1.5vw, 8px);
  transition: all 0.3s ease;
  transform-origin: center center;
}

.sport-icon {
  width: clamp(38px, 11vw, 55px);
  height: clamp(38px, 11vw, 55px);
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s;
}

.sport-type.active .sport-icon {
  background-color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.sport-type.center .sport-icon {
  transform: scale(1.4);
  z-index: 3;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.sport-icon img {
  width: clamp(20px, 6vw, 28px);
  height: clamp(20px, 6vw, 28px);
  object-fit: contain;
  fill: #333;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.sport-type.active .sport-icon img {
  opacity: 1;
}

.sport-type.center .sport-icon img {
  opacity: 1;
  fill: #000;
}

.sport-name {
  font-size: clamp(11px, 3.2vw, 14px);
  text-align: center;
  color: #444;
  white-space: nowrap;
  max-width: clamp(55px, 16vw, 80px);
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s, font-weight 0.3s;
}

.sport-type.active .sport-name {
  color: #222;
}

.sport-type.center .sport-name {
  font-weight: bold;
  color: #000;
  font-size: clamp(12px, 3.6vw, 16px);
}

/* 底部按钮区域 */
.bottom-area {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(15px, 4vw, 20px) 0 0;
  width: 100%;
}

.location-button {
  display: flex;
  align-items: center;
  background-color: #fff;
  border: none;
  border-radius: 20px;
  padding: clamp(7px, 2vw, 10px) clamp(12px, 3vw, 16px);
  font-size: clamp(12px, 3.5vw, 14px);
  color: #333;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s, transform 0.3s;
}

.location-button:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.location-icon {
  width: clamp(14px, 4vw, 16px);
  height: clamp(14px, 4vw, 16px);
  margin-right: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.start-button {
  width: clamp(60px, 17vw, 80px);
  height: clamp(60px, 17vw, 80px);
  background-color: #4cd4bc;
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: clamp(15px, 4vw, 18px);
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(76, 212, 188, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.start-button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(76, 212, 188, 0.5);
}

/* 横屏模式 */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .main-panel {
    width: min(92%, 500px);
    height: 80vh;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    padding: 12px 16px;
  }

  .settings-area {
    width: 58%;
    padding-right: 15px;
  }

  .sport-type-selector {
    width: 42%;
    height: 100%;
    margin: 0;
    align-self: center;
  }

  .sport-types {
    flex-direction: column;
    height: 100%;
    padding: 5px 0;
  }

  .arrow.left, .arrow.right {
    display: none;
  }

  .bottom-area {
    width: 100%;
    margin-top: 12px;
    padding-top: 10px;
  }
  
  .start-button {
    width: clamp(50px, 12vw, 65px);
    height: clamp(50px, 12vw, 65px);
  }
}

/* 小型手机 */
@media screen and (max-width: 320px) {
  .main-panel {
    width: 95%;
    padding: 14px;
    min-height: 50vh;
  }
  
  .sport-types {
    height: 100px;
  }
  
  .sport-icon {
    width: 35px;
    height: 35px;
  }
  
  .sport-type.center .sport-icon {
    transform: scale(1.3);
  }
  
  .sport-icon img {
    width: 18px;
    height: 18px;
  }
  
  .sport-name {
    font-size: 10px;
    max-width: 45px;
  }
  
  .sport-type.center .sport-name {
    font-size: 11px;
  }
  
  .location-button {
    padding: 5px 8px;
    font-size: 11px;
  }
  
  .start-button {
    width: 55px;
    height: 55px;
    font-size: 14px;
  }
}

/* 手机尺寸 */
@media screen and (min-width: 321px) and (max-width: 375px) {
  .main-panel {
    width: 92%;
    padding: 16px;
    min-height: 48vh;
  }

  .sport-type-selector {
    margin: 8px 0;
  }
  
  .arrow {
    height: 80px;
    width: 24px;
  }

  .sport-icon {
    width: 40px;
    height: 40px;
  }
  
  .sport-type.center .sport-icon {
    width: 55px;
    height: 55px;
  }

  .sport-name {
    font-size: 11px;
    max-width: 50px;
  }

  .location-button {
    padding: 6px 10px;
    font-size: 11px;
  }

  .start-button {
    width: 58px;
    height: 58px;
    font-size: 14px;
  }
}

/* 大屏幕手机 */
@media screen and (min-width: 376px) and (max-width: 428px) {
  .main-panel {
    min-height: 48vh;
    padding: 18px;
  }

  .sport-icon {
    width: 45px;
    height: 45px;
  }
  
  .sport-type.center .sport-icon {
    width: 62px;
    height: 62px;
  }

  .sport-name {
    font-size: 12px;
    max-width: 60px;
  }
}

/* 更大屏幕手机 */
@media screen and (min-width: 429px) and (max-width: 767px) {
  .main-panel {
    min-height: 50vh;
    width: min(90%, 380px);
    padding: 20px;
  }

  .sport-icon {
    width: 48px;
    height: 48px;
  }
  
  .sport-type.center .sport-icon {
    width: 65px;
    height: 65px;
  }

  .sport-name {
    font-size: 12px;
  }

  .start-button {
    width: 65px;
    height: 65px;
  }
}

/* 平板尺寸 */
@media screen and (min-width: 768px) {
  .main-panel {
    width: min(85%, 420px);
    min-height: 55vh;
    max-height: 650px;
    border-radius: 30px;
    padding: 24px;
  }

  .setting-title {
    font-size: 20px;
  }

  .setting-reminder {
    font-size: 15px;
  }

  .time-block {
    height: 55px;
    border-radius: 12px;
  }

  .time-block input {
    font-size: 28px;
  }

  .time-separator {
    font-size: 28px;
  }

  .sport-icon {
    width: 58px;
    height: 58px;
  }
  
  .sport-type.center .sport-icon {
    width: 80px;
    height: 80px;
  }

  .sport-icon img {
    width: 28px;
    height: 28px;
  }
  
  .sport-type.center .sport-icon img {
    width: 40px;
    height: 40px;
  }

  .sport-name {
    font-size: 14px;
    max-width: 80px;
  }

  .location-button {
    padding: 10px 18px;
    font-size: 15px;
    border-radius: 25px;
  }

  .location-icon {
    width: 18px;
    height: 18px;
  }

  .start-button {
    width: 80px;
    height: 80px;
    font-size: 19px;
  }
}

/* 超小屏幕 */
@media screen and (max-height: 600px) and (orientation: portrait) {
  .main-panel {
    min-height: 65vh;
    padding: 14px;
  }

  .settings-area {
    margin-top: 0;
  }

  .time-block {
    height: 38px;
  }
  
  .sport-types {
    height: 90px;
  }

  .sport-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 5px;
  }
  
  .sport-type.center .sport-icon {
    width: 52px;
    height: 52px;
  }

  .sport-icon img {
    width: 20px;
    height: 20px;
  }
  
  .sport-type.center .sport-icon img {
    width: 28px;
    height: 28px;
  }

  .start-button {
    width: 55px;
    height: 55px;
    font-size: 14px;
  }
  
  .bottom-area {
    padding-top: 10px;
  }
}

/* 高屏幕适配 */
@media screen and (min-height: 800px) {
  .main-panel {
    min-height: 40vh;
  }
}
</style>